<template>
  <div class="NavMenu">
    <ul>
      <li class="compound">综合</li>
      <li class="sales">销量</li>
      <li class="price">价格</li>
      <li class="change">筛选</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "NavMenu",
  data() {
    return {};
  },
  components: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>

<style scoped lang='scss'>
.NavMenu {
  height: 0.9rem;
  line-height: 0.9rem;
  border-bottom: 1px solid #eee;
  ul {
    display: flex;
    justify-content: space-between;
    li {
      flex: 1;
      text-align: center;
      font-size: 0.373333rem;
    }
  }
}
.compound {
  position: relative;
}
.compound::after {
  content: "";
  position: absolute;
  border: 0.16rem solid #ff6d07;
  border-left: 0.16rem solid rgba($color: #000000, $alpha: 0);
  border-right: 0.16rem solid rgba($color: #000000, $alpha: 0);
  border-bottom: 0.16rem solid rgba($color: #000000, $alpha: 0);
  right: 0.266667rem;
  top: 0.373333rem;
  z-index: 99;
}
.price {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    border: 0.16rem solid rgba($color: #000000, $alpha: 0);
    border-top: 0.16rem solid #aaa;
    right: 0.266667rem;
    top: 0.533333rem;
    z-index: 99;
  }
  &::before {
    content: "";
    position: absolute;
    border: 0.16rem solid rgba($color: #000000, $alpha: 0);
    border-bottom: 0.16rem solid #aaa;
    right: 0.266667rem;
    top: 0.08rem;
    z-index: 99;
  }
}
.active-top {
  border-top: 0.16rem solid #ff6d07;
}
.active-bottom {
  border-bottom: 0.16rem solid #ff6d07;
}
</style>